<template>
    <div class="apiRouterContainer">
        <div class="searchContainer">
            <ApiSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addApi()">添 加</el-button>
        </div>

        <div class="mainInfoContainer">
            <el-table
                :data="routerDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                max-height="70vh"
            >
                <el-table-column prop="name" label="路由名称" />
                <el-table-column prop="code" label="路由编码" />
                <el-table-column prop="applicationName" label="微服务" />
                <el-table-column prop="routePath" label="路由地址" />
                <el-table-column prop="predicates" label="断言" />
                <el-table-column prop="commonType" label="API是否租户共享" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.commonType" @change="(value) => {let requestParam = {url: `/ywu/api/api.update.share.api.info`,method: `post`,data: {id: scope.row.id, commonType: value}};this.$request(requestParam).then(res => {if (res.code === `200`) {this.$ElNotification({title: `Success`,message: `成功`,type: `success`});} else {this.$ElNotification({title: `Error`,message: res.errorCode + `:` + res.message,type: `error`});}});}"/>
                    </template>
                </el-table-column>

                <el-table-column prop="filters" label="过滤" />
                <el-table-column prop="corsState" label="跨域状态" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="warning" size="small" @click="handleAuthorisation(scope.$index, scope.row)">授 权</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="routerDataList.pageIndex"
                v-model:page-size="routerDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="routerDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>

        <div>
            <AddApiDialog :apiForm="apiForm"/>
        </div>
        <div>
            <ApiDeleteDialog :deleteData="apiForm" header="删除菜单" body="是否确认删除?" />
        </div>
        <div>
            <ApiRoleAuthorisationDialog :apiRoleAuthorisation="apiRoleAuthorisation"/>
        </div>
    </div>
</template>

<script>
import ApiSearch from '@/components/apiManage/ApiSearch'
import AddApiDialog from "@/components/apiManage/AddApiDialog";
import ApiDeleteDialog from "@/components/apiManage/ApiDeleteDialog";
import ApiRoleAuthorisationDialog from "@/components/apiManage/ApiRoleAuthorisationDialog";
import {createTag} from '@/utils/tagCreate'
import {apiRouteInfoQuery, apiRouteUpdateShareInfo} from "@/request/api";

export default {
    name: "apiRouteManage",
    data() {
        return {
            apiForm: {
                id: '',
                name: '',
                code: '',
                routePath: '',
                corsState: '',
                predicates: '',
                filters: '',
                timeOutNum: '',
                timeOut: false,
                applicationName: ''
            },
            apiRoleAuthorisation: {}
        }
    },
    mounted() {
        createTag(this.$route, this.$store)
    },
    methods: {
        addApi() {
            this.apiForm = {
                id: '',
                name: '',
                code: '',
                routePath: '',
                corsState: '',
                predicates: '',
                filters: '',
                routeType: 'lb',
                routeServiceName: '',
                httpIp: '',
                timeOutNum: '',
                timeOut: false,
                applicationName: ''
            }
            this.$store.commit('openApiAddOrUpdateDialogVisible')
        },
        handleUpdate(index, raw) {
            this.apiForm = {
                id: raw.id,
                name: raw.name,
                code: raw.code,
                routePath: raw.routePath,
                corsState: raw.corsState,
                predicates: raw.predicates,
                filters: raw.filters,
                timeOut: raw.timeOut,
                timeOutNum: raw.timeOutNum,
                applicationName: raw.applicationName
            }
            if (this.apiForm.routePath.startsWith("lb")) {
                this.apiForm.routeType = "lb";
                this.apiForm.routeServiceName = this.apiForm.applicationName;
                this.apiForm.routePath = this.apiForm.routePath.replace("lb://" + this.apiForm.routeServiceName, "");
            } else if (this.apiForm.routePath.startsWith("http")) {
                this.apiForm.routeType = "http";
                let routePath = this.apiForm.routePath;
                let newStr = routePath.replace("http://", "");
                let index = newStr.indexOf("/")
                this.apiForm.httpIp = newStr.substring(0, index);
                this.apiForm.routePath = this.apiForm.routePath.replace("http://" + this.apiForm.httpIp, "");
            }
            this.$store.commit('openApiAddOrUpdateDialogVisible')
        },
        handleDelete(index, raw) {
            this.apiForm = {
                id: raw.id,
                name: raw.name,
                code: raw.code,
                routePath: raw.routePath,
                corsState: raw.corsState,
                predicates: raw.predicates,
                filters: raw.filters,
                timeOut: raw.timeOut,
                timeOutNum: raw.timeOutNum,
                applicationName: raw.applicationName
            }
            if (this.apiForm.routePath.startsWith("lb")) {
                this.apiForm.routeType = "lb";
                this.apiForm.routeServiceName = this.apiForm.applicationName;
                this.apiForm.routePath = this.apiForm.routePath.replace("lb://" + this.apiForm.routeServiceName, "");
            } else if (this.apiForm.routePath.startsWith("http")) {
                this.apiForm.routeType = "http";
                let routePath = this.apiForm.routePath;
                let newStr = routePath.replace("http://", "");
                let index = newStr.indexOf("/")
                this.apiForm.httpIp = newStr.substring(0, index);
                this.apiForm.routePath = this.apiForm.routePath.replace("http://" + this.apiForm.httpIp, "");
            }
            this.$store.commit('openDeleteApiDialogVisible')
        },
        changePage(index, size) {
            this.apiSearchData.pageInfo = {
                pageIndex: index,
                pageSize: size
            };
            apiRouteInfoQuery(this.apiSearchData).then(res => {
                if (res.code === '200') {
                    this.$store.commit('changeRouterDataList', res.data);
                }
            })
        },
        handleAuthorisation(index, raw) {
            this.apiRoleAuthorisation = raw;
            this.$store.commit('changeApiRoleAuthorisationDialogVisible', true)
        }
    },
    computed: {
        routerDataList() {
            return this.$store.state.routerDataList;
        },
        apiSearchData() {
            return this.$store.state.apiSearchData;
        }
    },
    components: {
        ApiSearch,
        AddApiDialog,
        ApiDeleteDialog,
        ApiRoleAuthorisationDialog
    },
    created() {
        apiRouteInfoQuery(this.apiSearchData).then(res => {
            if (res.code === '200') {
                this.$store.commit('changeRouterDataList', res.data);
            }
        })
    }
}
</script>

<style scoped lang="less">
    .apiRouterContainer {
        width: 100%;
        height: 100%;
        .searchContainer {
            padding-top: 0.5%;
            padding-bottom: 0.5%;
            width: 100%;
            display: flex;
            align-items: center;
        }
        .insertContainer {
            width: 100%;
            height: 2%;
            display: flex;
            align-items: center;
            padding-left: 1%;
        }
        .mainInfoContainer {
            width: 98%;
            height: 91%;
            padding-left: 1%;
        }
    }
</style>